<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing App</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid black;
            margin-top: 10px;
        }
        .controls {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        .controls > * {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <label for="colorPicker">Color:</label>
        <input type="color" id="colorPicker" value="#000000">

        <label for="lineWidth">Width:</label>
        <input type="range" id="lineWidth" min="1" max="10" value="1">

        <button id="clearCanvas">Clear</button>

        <label for="shapeSelect">Shape:</label>
        <select id="shapeSelect">
            <option value="none">Pen</option>
            <option value="rectangle">Rectangle</option>
            <option value="circle">Circle</option>
            <option value="line">Line</option>
        </select>

        <label for="lineStyleSelect">Line Style:</label>
        <select id="lineStyleSelect">
            <option value="solid">Solid</option>
            <option value="dashed">Dashed</option>
        </select>

        <button id="undo">Undo</button>
    </div>
    <canvas id="drawingCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');

        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let shape = 'none';
        let lineStyle = 'solid';
        const undoStack = [];

        const colorPicker = document.getElementById('colorPicker');
        const lineWidth = document.getElementById('lineWidth');
        const clearCanvasButton = document.getElementById('clearCanvas');
        const shapeSelect = document.getElementById('shapeSelect');
        const lineStyleSelect = document.getElementById('lineStyleSelect');
        const undoButton = document.getElementById('undo');

        function saveState() {
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            undoStack.push(imageData);
        }

        colorPicker.addEventListener('input', () => {
            ctx.strokeStyle = colorPicker.value;
            ctx.fillStyle = colorPicker.value;
        });

        lineWidth.addEventListener('input', () => {
            ctx.lineWidth = lineWidth.value;
        });

        clearCanvasButton.addEventListener('click', () => {
            saveState();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

        shapeSelect.addEventListener('change', () => {
            shape = shapeSelect.value;
        });

        lineStyleSelect.addEventListener('change', () => {
            lineStyle = lineStyleSelect.value;
        });

        undoButton.addEventListener('click', () => {
            if (undoStack.length > 0) {
                const imageData = undoStack.pop();
                ctx.putImageData(imageData, 0, 0);
            }
        });

        function startDrawing(e) {
            saveState();
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
            if (shape === 'none') {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
            }
        }

        function draw(e) {
            if (!isDrawing) return;

            const [currentX, currentY] = [e.offsetX, e.offsetY];

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (undoStack.length > 0) {
                ctx.putImageData(undoStack[undoStack.length - 1], 0, 0);
            }

            if (shape === 'none') {
                ctx.lineTo(currentX, currentY);
                ctx.stroke();
                [lastX, lastY] = [currentX, currentY];
            } else {
                ctx.beginPath();
                if (shape === 'rectangle') {
                    ctx.rect(lastX, lastY, currentX - lastX, currentY - lastY);
                } else if (shape === 'circle') {
                    const radius = Math.sqrt((currentX - lastX) ** 2 + (currentY - lastY) ** 2);
                    ctx.arc(lastX, lastY, radius, 0, Math.PI * 2);
                } else if (shape === 'line') {
                    if (lineStyle === 'dashed') {
                        ctx.setLineDash([10, 5]);
                    } else {
                        ctx.setLineDash([]);
                    }
                    ctx.moveTo(lastX, lastY);
                    ctx.lineTo(currentX, currentY);
                }
                ctx.stroke();
                ctx.setLineDash([]);
            }
        }

        function stopDrawing() {
            isDrawing = false;
            ctx.closePath();
        }

        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);
    </script>
</body>
</html>
